<template lang="">
    <div>
        <el-dialog title="导入预览" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false"
            :close-on-press-escape="false">
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column prop="1" label="学生学号">
                </el-table-column>
                <el-table-column prop="2" label="学生姓名" width="180">
                </el-table-column>
                <el-table-column prop="3" label="所在专业">
                </el-table-column>
                <el-table-column prop="4" label="所在班级">
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="emitServer">确认导入</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: 'UploadResponse',
        data() {
            return {
                dialogVisible: false,
                tableData: [/* {
                    0: 1,
                    1: 2022,
                    2: '张三',
                    3: '通信工程',
                    4: '20通信1班'
                }, {
                    '0': 2,
                    '1': 2022,
                    '2': '李四',
                    '3': '通信',
                    '4': '20通信1班'
                } */],
                val: ''
            }
        },
        methods: {
            closeDialog() {
                this.dialogVisible = false
            },
            emitServer() {
                let fd = new FormData()
                fd.append('file', this.val.file)
                console.log('fd',fd.get('file'));
                axios({
                    method: 'POST',
                    url: '/save',
                    withCredentials: true,
                    data: fd,
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then((result) => {
                    if (result.data.code == '200') {
                        this.$message({
                            message: '导入成功',
                            type: 'success'
                        })
                        this.tableData = []
                        this.$bus.$emit('sthSuccess')
                        this.closeDialog()
                    } else {
                        this.$message({
                            message: result.data.data,
                            type: 'error'
                        })
                    }
                }).catch((err) => {
                    this.$message({
                        message: '导入失败' + err.message,
                        type: 'info'
                    })
                });
            }
        },
        mounted() {
            this.$bus.$on('uploadSuccess', (obj) => {
                console.log('Upload组件收到', obj);
                this.tableData = obj.response
                this.val = obj.val
                this.dialogVisible = true
            })
        },
        beforeDestroy() {
            this.$bus.$off('uploadSuccess')
        },
    }
</script>
<style lang="">

</style>